<template>
<!-- 考试结果页面  -->
    <div class="app-container" style="height: 100%;background-color: #f4f4f4">
        <el-container>
            <el-header height="100px">
                <p style="font-size: 18px;" v-text="scoreForm.paperName"></p>
                <p style="font-size: 12px;" v-text="'本卷共'+scoreForm.questionCount+'道试题' "></p>
            </el-header>
            <el-main>
                <el-progress type="circle" v-if="showScore" :width="100"  :percentage="scoreForm.theoryScore" :format="format" :color="customColorMethod"></el-progress>
                <el-form :model="scoreForm" :inline="true" style="margin-bottom: 20px;" label-width="110px">
                    <el-row style="margin: 0px 60px 10px 60px">
                        <el-col :span="8">
                            <el-form-item label="答题时间：" prop="submitDate">
                                <span v-text="scoreForm.submitDate" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="答题用时(分)：" prop="answerDate">
                                <span v-text="scoreForm.answerDate" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="总题数：" prop="questionCount">
                                <span v-text="scoreForm.questionCount" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="对题数：" prop="correctNumber">
                                <span v-text="scoreForm.correctNumber" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="margin: 0px 0px 0px 60px">
                        <el-col :span="24">
                            <el-button :loading="buttonLoading" style="float: right;" @click="questionPapse" >试卷解析</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <el-table v-if="scoreForm.answerDetailVOList !== null ? true : false" border :data="scoreForm.answerDetailVOList" >
                    <el-table-column label="题型" align="center" prop="questionType" :formatter="questionTypeFormat" width="80" />
                    <el-table-column label="总题数" align="center" prop="questionCount" />
                    <el-table-column label="答题数" align="center" prop="alreadyAnswerNum" />
                    <el-table-column label="对题数" align="center" prop="correctNumber"/>
                    <el-table-column label="错题数" align="center" prop="errorNumber" />
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import {getAnswerResult} from "@/api/exam/exam";
    export default {
        name: "simulateSubmitForm",
        data() {
            return {
            //    答题成绩表单
                scoreForm: {},
                buttonLoading: false,
                // 试题类型数据字典
                questionTypeOptions: [],
                scoreId: undefined, // 成绩Id
                // 是否显示成绩
                showScore: true, // 默认显示
            }
        },
        created() {
            //查询试题类别字典状态
            this.getDicts("question_type").then(response => {
                this.questionTypeOptions = response.responseBody.result;
            });
            // 获取路径参数
            let result = this.getParams(window.location.hash);
            // console.log(result)
            this.scoreId = result.scoreId; // 成绩Id
            this.showScore = result.showScore === undefined ? true : '0' === result.showScore ? true : false ; // 是否显示分数标识
            this.getAnswerResult(this.scoreId);
        },
        methods: {
            // 去掉样式自带%符号
            format(percentage) {
                return percentage !== null ? `${percentage}分` : `0分`;
            },
            // 各阶段分数颜色表示
            customColorMethod(percentage) {
                if (this.scoreForm.status != null && '1' === this.scoreForm.status) {
                    return '#e6a23c';
                } else {
                    return '#67c23a';
                }
            },
            // 试题类型字典翻译
            questionTypeFormat(row, column) {
                return this.selectDictLabel(this.questionTypeOptions, row.questionType);
            },
            // 试题解析
            questionPapse() {
                // 打开新页面--》试卷试题解析页面
                var routeUrl = this.$router.resolve({
                    //'&scoreId='+scoreId+  examType=3: 阅卷   4：查看
                    path: '/read-paper-form?scoreId='+this.scoreId+'&examType='+4 // 这里的路径就可以正常的写，不需要添加_blank: true
                })
                window.open(routeUrl.href, '_blank');
            },
            // 通过成绩Id获取考试结果
            getAnswerResult(scoreId) {
                getAnswerResult(scoreId).then(resp => {
                    this.scoreForm = resp.responseBody;
                    if ( '1' === this.scoreForm.readStatus) { // 判断是否为待阅卷
                        this.showScore = false; // 不显示成绩
                    }
                }).catch(err => {})
            },
            // 截取浏览器路径参数
            getParams(url) {
                let res = {}
                if (url.includes('?')) {
                    let str = url.split('?')[1]
                    let arr = str.split('&')
                    for (let item of arr) {
                        let key = item.split('=')[0]
                        let value = item.split('=')[1]
                        res[key] = decodeURIComponent(value)
                    }
                }
                return res
            },
        }
    }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
    }
    .el-main {
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        margin: 20px 15% 50px 15%;
    }
</style>
